<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Trigger an 'update' event for refreshing elements</title>
    <style type="text/css">
        body {
            color: #5d5d5d;
            font-family: Helvetica, Arial, sans-serif;
        }

        h1 {
            font-size: 30px;
            margin: auto;
            margin-top: 50px;
        }

        .container {
            max-width: 800px;
            margin: auto;
        }

        /* Specific mapael css class are below
         * 'mapael' class is added by plugin
        */

        .mapael .mapTooltip {
            position: absolute;
            background-color: #fff;
            moz-opacity: 0.70;
            opacity: 0.70;
            filter: alpha(opacity=70);
            border-radius: 10px;
            padding: 10px;
            z-index: 1000;
            max-width: 200px;
            display: none;
            color: #343434;
        }

        /* For all zoom buttons */
        .mapael .zoomButton {
            background-color: #fff;
            border: 1px solid #ccc;
            color: #000;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            position: absolute;
            top: 0;
            font-weight: bold;
            left: 10px;

            -webkit-user-select: none;
            -khtml-user-select : none;
            -moz-user-select: none;
            -o-user-select : none;
            user-select: none;
        }

        /* Reset Zoom button first */
        .mapael .zoomReset {
            top: 10px;
        }

        /* Then Zoom In button */
        .mapael .zoomIn {
            top: 30px;
        }

        /* Then Zoom Out button */
        .mapael .zoomOut {
            top: 50px;
        }

        .mapael .map {
            background-color: #cddee0;
            margin: 10px;
            position: relative;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
            charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
    <script src="../../js/jquery.mapael.js" charset="utf-8"></script>
    <script src="../../js/maps/france_departments.js" charset="utf-8"></script>
    <script src="../../js/maps/world_countries.js" charset="utf-8"></script>
    <script src="../../js/maps/usa_states.js" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {
            $(".mapcontainer").mapael({
                map: {
                    name: "france_departments"
                    , zoom: {
                        enabled: true
                    }
                    , defaultPlot: {
                        attrs: {
                            opacity: 0.6
                        }
                        , text: {
                            attrs: {
                                fill: "#505444"
                            }
                            , attrsHover: {
                                fill: "#000"
                            }
                        }
                    }
                    , defaultArea: {
                        attrs: {
                            fill: "#f4f4e8"
                            , stroke: "#ced8d0"
                        }
                        , text: {
                            attrs: {
                                fill: "#505444"
                            }
                            , attrsHover: {
                                fill: "#000"
                            }
                        }
                    }
                },
                areas: {
                    "department-56": {
                        text: {content: "56"},
                        tooltip: {content: "Morbihan (56)"}
                    },
                },
                plots: {
                    'paris': {
                        latitude: 48.86,
                        longitude: 2.3444
                    },
                    'lyon': {
                        type: "circle",
                        size: 50,
                        latitude: 45.758888888889,
                        longitude: 4.8413888888889,
                        value: 700000,
                        href: "http://fr.wikipedia.org/wiki/Lyon",
                        tooltip: {content: "<span style=\"font-weight:bold;\">City :</span> Lyon"},
                        text: {content: "Lyon"}
                    },
                    'rennes': {
                        type: "square",
                        size: 20,
                        latitude: 48.114166666667,
                        longitude: -1.6808333333333,
                        tooltip: {content: "<span style=\"font-weight:bold;\">City :</span> Rennes"},
                        text: {content: "Rennes"},
                        href: "http://fr.wikipedia.org/wiki/Rennes"
                    }
                }
            });

            $('#refresh').on('click', function () {

                // Update some plots and areas attributes ...
                var updatedOptions = {'areas': {}, 'plots': {}};
                updatedOptions.areas["department-56"] = {
                    tooltip: {
                        content: "Morbihan (56) (2)"
                    },
                    attrs: {
                        fill: "#0088db"
                    },
                    text: {content: "56 (2)"}
                };
                updatedOptions.plots["rennes"] = {
                    tooltip: {
                        content: "Rennes (2)"
                    },
                    attrs: {
                        fill: "#f38a03"
                    }
                    , text: {position: "top"}
                    , size: 5
                };

                // add some new plots ...
                var newPlots = {
                    "Limoge": {
                        latitude: 45.834444,
                        longitude: 1.261667,
                        text: {content: "Limoge"},
                        tooltip: {content: "Limoge"}
                    }
                    , "Dijon": {
                        size: 60,
                        latitude: 47.323056,
                        longitude: 5.041944,
                        text: {
                            content: "Dijon",
                            position: "left",
                            margin: 5
                        }
                    }
                }

                // and delete some others ...
                var deletedPlots = ["paris", "lyon"];

                $(".mapcontainer").trigger('update', [{
                    mapOptions: updatedOptions, 
                    newPlots: newPlots, 
                    deletePlotKeys: deletedPlots,
                    animDuration: 1000
                }]);
            });
        });
    </script>

</head>

<body>
<div class="container">

    <h1>Trigger an 'update' event for refreshing elements</h1>

    <div class="mapcontainer">
        <input type="button" value="Update elements" id="refresh"/>

        <div class="map">
            <span>Alternative content for the map</span>
        </div>
    </div>

    <p><b>All example for jQuery Mapael are available <a href="https://www.vincentbroute.fr/mapael/">here</a>.</b></p>

</div>


</body>
</html>